import React, { Component, PureComponent } from 'react'
import ReactDOM from 'react-dom'

class Modal extends PureComponent {
  render() {
    return ReactDOM.createPortal(this.props.children, document.getElementById('modal'))
  }
}

class Home extends PureComponent {
  render() {
    return (
      <div>
        <h2>Home</h2>

        <Modal>
          <h2>我是独立于App组件的----modal</h2>
        </Modal>
      </div>
    )
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Home />
      </div>
    )
  }
}
